<template>
  <div>
    <home-head></home-head>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="wrap">
        <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item class="my-swipe-item" v-for="banner in banners" :key="banner.id">
            <img :src="banner.picUrl">
          </van-swipe-item>
        </van-swipe>
        <!-- /轮播 -->
        <!-- 公司信息 -->
        <div class="conpany-info">
          <div class="info-item">
            <van-icon name="checked" size="12"/>
            <span>认证龙头企业</span>
          </div>
          <div class="info-item">
            <van-icon name="checked" size="12"/>
            <span>17年品牌</span>
          </div>
          <div class="info-item">
            <van-icon name="checked" size="12"/>
            <span>3小时送达</span>
          </div>
          <div class="info-item">
            <van-icon name="checked" size="12"/>
            <span>最近<u>330667</u>条好评</span>
          </div>
        </div>
        <!-- /公司信息 -->
        <!-- 宫格导航 -->
        <div class="navs">
          <van-grid :column-num="3" clickable>
            <van-grid-item
            v-for="cate in cates"
            :key = cate.id
            :icon="cate.icon"
            :text="cate.name"
            @click="enterLists(cate.id, cate.name)"
             />
          </van-grid>
        </div>
        <!-- /宫格导航 -->
        <!-- 推荐商品 -->
        <van-list
          v-model="loading"
          :finished="finished"
          :offset="50"
          finished-text="我也是有底线的哦~~"
          @load="onLoad"
        >
          <item-lists :items="items" @clickItem="enterDetail"></item-lists>
        </van-list>
        <!-- /推荐商品 -->
      </div>
    </van-pull-refresh>
    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import MyTabbar from '../../components/MyTabbar'
import HomeHead from './components/HomeHead'
import ItemLists from './components/ItemLists.vue'
import { fetchBanner, fetchCate, fetchItems } from '../../api'
export default {
  data () {
    return {
      cates: [],
      banners: [],
      items: [],
      page: 1,
      pageSize: 5,
      /*
        loading代表是否处理上拉触底的状态 默认值是false，
        当load事件触发 自动变成true，反过来loading为true时，
        不会再触发load事件
      */
      loading: false,
      /*
        finished属性的finished代表是否已经加载到最后一页，
        当它变成true时，load事件就不会再触发了，同时列表
        下面的文案就变成了了finished-text的值
      */
      finished: false,
      /*
        下拉刷新组件 是否处于下拉刷新的状态 在下拉后自动变成true，
        变成true内容永远处于下拉状态，不会主动上去，在刷新成功后
        主动变成false结束这个状态
      */
      isLoading: false

    }
  },
  created () {
    this.fetchBanner()
    this.fetchCate()
  },
  methods: {
    // 进入列表页
    enterLists (id, name) {
      this.$router.push({
        path: '/itemLists',
        query: {
          cateId: id,
          cateName: name
        }
      })
    },
    // 进入详情页
    enterDetail (id) {
      this.$router.push(`/detail/${id}`)
    },
    onRefresh () {
      this.page = 1
      // 列表数据清空
      this.items = []
      // 改变上拉到最后的状态
      this.finished = false
      this.fetchItems()
    },
    // 上拉触底事件
    onLoad () {
      this.fetchItems()
      this.page++
    },
    // 请求宫格导航数据
    fetchCate () {
      fetchCate().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
    // 获取轮播内容
    fetchBanner () {
      fetchBanner().then(res => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    // 列表数据请求
    fetchItems () {
      fetchItems({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        // 加载中状态解除
        this.loading = false
        // 下拉刷新状态解除
        this.isLoading = false
        if (res.data.code === 700) {
          // 到达最后一页 没有数据了
          this.finished = true
        }
        if (res.data.code === 0) {
          // 原有数据和新数据进行拼接（防止旧数据丢失）
          this.items = [...this.items, ...res.data.data.result]
        }
        console.log(this.items)
      })
    }
  },
  components: {
    MyTabbar,
    HomeHead,
    ItemLists
  }

}
</script>

<style lang="scss" scoped>
.wrap{
  padding-top: 46px;
  padding-bottom: 46px;
  margin: 0 0.24rem
}
.my-swipe{
  width: 100%;
  height: 5rem;
  .my-swipe-item{
    width: 10rem;
  }
  img{
    width: 100%;
  }
}
.conpany-info{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0.24rem;
  margin-bottom: 0.2rem;
  .info-item{
    .van-icon{
      color:#71797f;
      margin-right:0.075rem ;
    }
    span{
      color: #71797f;
    }
  }
}
</style>
